<template>
  <view class="order-course">
    <view class="order-course-pannel">
      <view class="order-course-item" @click="selectSwimPlaceClick">
        <label class="order-course-item-label">游泳馆</label>
        <view class="order-course-item-content">
          <label
            class="order-course-item-content-text"
            v-if="orderCourseInfo.swimPlaceInfo && orderCourseInfo.swimPlaceInfo.name"
            >{{ orderCourseInfo.swimPlaceInfo.name }}</label
          >
          <label class="order-course-item-content-hint" v-else>请选择</label>
        </view>
        <uni-icons color="#828B94" size="14" type="forward"></uni-icons>
      </view>
      <view class="order-course-item" @click="selectCourseClick">
        <label class="order-course-item-label">课程</label>
        <view class="order-course-item-content">
          <label
            class="order-course-item-content-text"
            v-if="orderCourseInfo.courseInfo && orderCourseInfo.courseInfo.courseName"
            >{{ orderCourseInfo.courseInfo.courseName }}</label
          >
          <label class="order-course-item-content-hint" v-else>请选择</label>
        </view>
        <uni-icons color="#828B94" size="14" type="forward"></uni-icons>
      </view>
      <view class="order-course-item" @click="selectStudentClick">
        <label class="order-course-item-label">学生</label>
        <view class="order-course-item-content">
          <label
            class="order-course-item-content-text"
            v-if="orderCourseInfo.studentInfo && orderCourseInfo.studentInfo.studentName"
            >{{ orderCourseInfo.studentInfo.studentName }}</label
          >
          <label class="order-course-item-content-hint" v-else>请选择</label>
        </view>
        <uni-icons color="#828B94" size="14" type="forward"></uni-icons>
      </view>
    </view>
    <view class="order-course-save">
      <view class="order-course-save-btn" @click="saveClick">确定</view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';

import { showToast, toPage, goBack } from '@/utils/app';

const orderCourseInfo = ref({});

const bindListener = () => {
  uni.$on('__selectSwimPlace__', function (data) {
    orderCourseInfo.value['swimPlaceInfo'] = data;
  });
  uni.$on('__selectCourse__', function (data) {
    orderCourseInfo.value['courseInfo'] = data;
  });
  uni.$on('__selectStudent__', function (data) {
    orderCourseInfo.value['studentInfo'] = data;
  });
};

onMounted(() => {
  bindListener();
});

const selectSwimPlaceClick = () => {
  toPage('pages/course/SelectSwimPlace');
};

const selectCourseClick = () => {
  if (!orderCourseInfo.value.swimPlaceInfo || !orderCourseInfo.value.swimPlaceInfo.id) {
    return showToast('请选择游泳馆');
  }
  toPage('pages/course/SelectCourse?swimPlaceId=' + orderCourseInfo.value.swimPlaceInfo.id);
};

const selectStudentClick = () => {
  toPage('pages/user/StudentList?source=order');
};

const saveClick = () => {
  if(!orderCourseInfo.value.swimPlaceInfo ||  !orderCourseInfo.value.swimPlaceInfo.id) {
    return showToast('请选择游泳馆')
  }
  if(!orderCourseInfo.value.courseInfo ||  !orderCourseInfo.value.courseInfo.id) {
    return showToast('请选择课程')
  }
  if(!orderCourseInfo.value.studentInfo ||  !orderCourseInfo.value.studentInfo.id) {
    return showToast('请选择学生信息')
  }
  uni.$emit('__selectOrderCourse__', orderCourseInfo.value);
  goBack();
};
</script>

<style scoped lang="scss">
.order-course {
  display: flex;
  flex-direction: column;

  .order-course-pannel {
    display: flex;
    flex-direction: column;
    margin: 24rpx 24rpx 0rpx 24rpx;
    padding: 0rpx 24rpx;
    border-radius: 16rpx;
    background: #ffffff;

    .order-course-item {
      padding: 32rpx 0rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #efeff4;

      .order-course-item-label {
        width: 162rpx;
        color: #1f242e;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
      }

      .order-course-item-content {
        flex: 1;
        display: flex;
        align-items: center;

        .order-course-item-content-text {
          color: #1f242e;
          font-family: PingFang SC;
          font-size: 28rpx;
        }

        .order-course-item-content-hint {
          color: #828b94;
          font-family: PingFang SC;
          font-size: 28rpx;
        }
      }
    }

    .order-course-item:last-child {
      border-bottom: none;
    }
  }

  .order-course-save {
    display: flex;
    justify-content: center;
    margin-top: 96rpx;

    .order-course-save-btn {
      width: 654rpx;
      height: 88rpx;
      border-radius: 24rpx;
      background: linear-gradient(138.98deg, #cb3d3d 0.5%, #a11012 100.24%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
    }
  }
}
</style>
